<style scoped>
  .operation{
    height: 16%;
    padding: 2px 10px;
    border-bottom: 1px solid #d7d7d7;
  }
  .cardTop {
    /*height: 85%;*/
    height: 80%;
    padding: 3px;
  }

  .cardBottom {
    border-top: 1px solid #d7d7d7;
    color: grey;
    height: 12%;
    padding: 4px;
  }

  .tipLeft {
    border-right: 1px solid #d7d7d7;
    text-align: center;
    width: 25%;
    float: left;
    height: 100%;
  }

  .tipRight {
    text-align: center;
    width: 75%;
    height: 100%;
    float: left;
    padding: 10px 6px;
    overflow: auto;
  }

  .tipInnerTop {
    height: 100%;
    width: 100%;
    padding: 10px;
  }

  .tipInnerBotton {
    height: 15%;
    margin-top: 3%;
  }

  .typeItemContain {
    width: 100%;
    height: 180px;
  }

  .imgStyle {
    height: 100%;
    width: 100%;
  }

  .contents {
    word-break: keep-all;
    /* 不换行 */
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis;
    /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
  }

  .textLeft {
    float: left;
    width: 30%;
    text-align: left
  }

  .textMid {
    float: left;
    width: 50%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
  }

  .textRgiht {
    float: left;
    width: 20%;
    text-align: right
  }

  .leftPart {
    width: 94%;
    float: left;
  }

  .rightPart {
    width: 6%;
    float: left;
    text-align: right;
    padding-right: 5px;
  }

  .iconn {
    color: #2d8cf0;
  }

  .verticalCenter {
    display: flex;
    align-items: center;
  }

</style>
<template>
  <div class="cardData">
    <div class="typeItemContain">
      <div class="operation">
        <span style="margin-right: 10px;font-weight: bolder;font-size: 18px"> ID.{{cardData.id}}</span>
        <span @click="scaleFull" style="cursor: pointer;float: right;margin-left: 3px;" class="rt"><Icon type="ios-expand" size="26"/></span>
        <Button type="error" size="small" @click="deleteDevFromSpace" style="margin-left: 5px;margin-bottom: 8px;float: right">删除</Button>
        <Button type="success" size="small" @click="enteringForm" style="margin-left: 5px;margin-bottom: 8px;float: right">录入</Button>
        <Button type="primary" size="small" @click="editForm" style="margin-bottom: 8px;float: right">编辑</Button>
      </div>
      <div class="cardTop">
        <!--左边区域start-->
        <div class="tipLeft">
          <!--设备图片区域start-->
          <div class="tipInnerTop"> <img :src="preview" alt="" class="imgStyle"> </div>
          <!--设备图片区域end-->
          <!--显示设备状态start-->
          <div class="tipInnerBotton">
            <!--  <div v-show="cardData.status==1">
            <Icon type="ios-radio-button-on" :color="cardData.status==1?'green':'grey'" size="12"></Icon> <span v-bind:class="[cardData.status==1 ? 'working' : 'notWorking']">运行正常</span> </div>
          <div v-show="cardData.status==2">
            <Icon type="ios-radio-button-on" :color="cardData.status==2?'orange':'grey'" size="12"></Icon> <span v-bind:class="[cardData.status==2 ? 'working' : 'notWorking']">
                运行异常
                </span> </div>
          <div v-show="cardData.status==3">
            <Icon type="ios-radio-button-on" :color="cardData.status == 3 ?'red':'grey'" size="12"></Icon> <span v-bind:class="[cardData.status==3 ? 'working' : 'notWorking']">停止运行</span>
          </div>-->
          </div>
          <!--显示设备状态 end-->
          <Spin size="large" fix v-if="loadingImgStatus"></Spin>
        </div>
        <!--左边区域end-->
        <!--右边显示实时数据区域111 start-->
        <div class="tipRight row-list">
          <!--          <MyScroll>-->
          <Row v-for="(item, index) in properties" :key="index">
            <NumLine :did="cardData.id" :property="item" v-if="item.propertyType === 100"></NumLine>
            <ToggleLine :did="cardData.id" :property="item" v-if="item.propertyType === 101"></ToggleLine>
            <StatusLineGreen :did="cardData.id" :property="item" v-if="item.propertyType === 103"></StatusLineGreen>
            <StatusLineRed :did="cardData.id" :property="item" v-if="item.propertyType === 104"></StatusLineRed>
            <StatusLineYellow :did="cardData.id" :property="item" v-if="item.propertyType === 105"></StatusLineYellow>
          </Row>
          <!--          </MyScroll>-->
        </div>
        <!--右边显示实时数据区域 end-->
      </div>
      <div class="cardBottom verticalCenter">
        <div class="leftPart"> {{cardData.name}} | {{cardData.sn? cardData.sn : '无编号'}} </div>
        <div class="rightPart"> <span style="float:right;cursor:pointer;" @click="follow(cardData)">
<!--        <Icon type="ios-star" class="iconn" v-show="cardData.follow"></Icon>-->
<!--        <Icon type="ios-star-outline" v-show="!cardData.follow"></Icon>-->
        </span> </div>
      </div>
    </div>
    <!--    &lt;!&ndash;    组合设备弹窗&ndash;&gt;-->
    <!--    <Modal v-model="modal3" :title="modalTitle3" width="1700" :scrollable="true"-->
    <!--           @on-visible-change="modalChangeStatus" class="xsa" :mask-closable="false">-->
    <!--      <GroupDevice ref="groupDevice" @tell-refresh="doSonRefresh"></GroupDevice>-->
    <!--      <div slot="footer" style="display: none;"></div>-->
    <!--    </Modal>-->
    <!--    &lt;!&ndash;录入数据弹窗&ndash;&gt;-->
    <!--    <Modal v-model="modal4" :title="modalTitle4" width="1700" :scrollable="true"-->
    <!--           @on-visible-change="dataEntryModalChange" class="xsa" :mask-closable="false">-->
    <!--      <DataEntry ref="dataEntry" :into="dataEntryObj"></DataEntry>-->
    <!--      <div slot="footer" style="display: none;"></div>-->
    <!--    </Modal>-->
  </div>
</template>
<script>
  import StatusLineRed from './StatusLineRed'
  import StatusLineYellow from './StatusLineYellow'
  import StatusLineGreen from './StatusLineGreen'
  import NumLine from './NumLine'
  import ToggleLine from './ToggleLine'
  import MyScroll from '../common/MyScroll.vue'
  export default {
    name: 'DataCard',
    components: { NumLine, ToggleLine, StatusLineRed, StatusLineYellow, StatusLineGreen, MyScroll },
    props: ['cardData'],
    data: function () {
      return {
        timer: 0,
        properties: [],
        preview: null,
        loadingImgStatus: true,
        modal3: false,
        modal4: false,
        modalTitle3: '',
        modalTitle4: '录入设备数据'
      }
    },
    mounted () {
      if (this.cardData.iotDevType) {
        if (this.cardData.iotDevType.iconUrl === null) {
          this.preview = require('../../assets/default_device.png')
          this.loadingImgStatus = false
        } else {
          this.askPic(this.cardData.iotDevType.iconUrl)
        }
      } else {
        this.preview = require('../../assets/default_device.png')
        this.loadingImgStatus = false
      }
      // 初始化，定时器 请求数据
      this.loadCurData()
      this.timer = setInterval(() => {
        this.loadCurData()
      }, Math.floor(Math.random() * 3000) + 2000)
    },
    methods: {
      // 放大 弹窗
      scaleFull () {
        this.$emit('scaleFull')
      },
      // 编辑
      editForm () {
        this.$emit('editForm')
      },
      // 录入
      enteringForm () {
        this.$emit('enteringForm')
      },
      // 删除
      deleteDevFromSpace () {
        this.$Modal.confirm({
          title: '删除确认',
          content: '<p>确认要删除该所选择的设备吗?</p>',
          onOk: () => {
            this.$emit('deleteDevFromSpace')
          },
          onCancel: () => {
          }
        })
      },
      askPic: function (picUrl) {
        window.myapi.show_pic({ url: picUrl }).then(resp => {
          this.preview = 'data:image/png;base64,' + btoa(
            new Uint8Array(resp.data)
              .reduce((data, byte) => data + String.fromCharCode(byte), '')
          )
        }).catch(info => {
          this.$Notice.warning({
            title: '操作提示',
            desc: info
          })
        }).finally((fin) => {
          this.loadingImgStatus = false
        })
      },
      follow: function (obj) {
        let param = { 'id': obj.id }
        if (obj.follow) {
          this.cancelFollow(param)
        } else {
          this.doFollow(param)
        }
      },
      doFollow: function (obj) {
        window.myapi.do_follow(obj).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.$Notice.success({
              title: '关注设备成功！',
              desc: ''
            })
            this.cardData.follow = true
          } else {
            this.$Notice.warning({
              title: resp.data.msg || '返回数据异常！',
              desc: ''
            })
          }
        }).catch(() => {
          this.$Message.error('数据异常')
        })
      },
      cancelFollow: function (obj) {
        window.myapi.cancel_follow(obj).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.$Notice.success({
              title: '已取消关注该设备！',
              desc: ''
            })
            this.cardData.follow = false
          } else {
            this.$Notice.error({
              title: '返回数据异常！'
            })
          }
        }).catch(() => {
          this.$Notice.error({
            title: '返回数据异常！'
          })
        })
      },
      loadCurData: function () {
        // 根据设备id 从 服务器获取实时数据  ---- 以此分发给 子显示组件
        let param = { id: this.cardData.id }
        window.myapi.cur_data(param).then(resp => {
          // console.log(resp)
          if (resp.status === 200 && resp.data.status === 200) {
            this.typeNum = resp.data.data.type
            // type为0是真实，type为1则是虚拟
            this.properties = resp.data.data.iotCollItemDatas
            /* if (resp.data.data.type === 0 || resp.data.data.type === 1) {
               this.properties = resp.data.data.iotCollItemDatas
             } else {
               this.properties = resp.data.data.virtualItems
             } */
          } else {
            this.$Notice.error({
              title: '服务器返回数据异常',
              desc: resp.data.msg
            })
          }
          // eslint-disable-next-line handle-callback-err
        }).catch((error) => {
          window.clearInterval(this.timer)
          this.$Notice.error({
            title: '返回数据异常！',
            desc: '数据异常, 已关闭请求数据, 请适时尝试刷新页面'
          })
        })
      }
    },
    beforeDestroy () {
      // 销毁函数---- 执行收尾工作  cur_data
      window.clearInterval(this.timer)
    }
  }

</script>
